<template>
  <view class="content">
    <!-- <button type="primary" @tap="shareFc()">生成海报</button> -->

    <view class="head">
      <view class="Banner">
        <image
          style="width: 100%"
          :src="shopInfo.shop_img"
          mode="widthFix"
        ></image>
        <view class="storeName">{{ shopInfo.shop_name }}</view>
      </view>
      <view class="Info flexBox">
        <view class="Long"
          ><image :src="shopInfo.shop_logo" mode=""></image
        ></view>
        <view class="">
          <view class="">
            {{ ListInfo.length }}
          </view>
          <view class=""> 全部宝贝 </view>
        </view>
        <view @tap="shareFc()">
          <view class="code"
            ><image src="../static/images/codeIco.png" mode=""></image
          ></view>
          <view class=""> 二维码 </view>
        </view>
      </view>
    </view>

    <view class="flexBox recommend">
      <view class="hrBox"></view>
      <view class="flexBox">
        <image
          src="../static/images/loveIco.png"
          mode="widthFix"
          class="loveIco"
        ></image>
      </view>
      <view class="hrBox"></view>
    </view>

    <view class="ListBox">
      <view
        class="list flexBox"
        v-for="(item, index) in ListInfo"
        :key="index"
        @click="ToshopInfo(item.goods_id)"
      >
        <view class="shopImg"
          ><image :src="item.goods_image_url" mode=""></image
        ></view>
        <view class="InfoBox">
          <view class="shopName">
            {{ item.goods_name }}
          </view>
          <view class="flexBox" style="margin-top: 10rpx" v-if="!mid">
            <view class="Price"
              ><text style="color: #333333; font-weight: 500">佣金：</text>￥{{
                item.commission
              }}</view
            >
          </view>
          <view class="flexBox" style="margin-top: 10rpx">
            <view class="Price"
              ><text style="color: #333333; font-weight: 500">价格：</text>￥{{
                item.goods_price
              }}</view
            >
            <view class="buyBtn" v-if="!mid" @click.stop="buyBtn(item)"
              >分享</view
            >
            <view class="buyBtn" v-if="mid">购买</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 海报 -->

    <view
      class="flex_row_c_c modalView"
      :class="qrShow ? 'show' : ''"
      @tap="hideQr()"
    >
      <view class="flex_column">
        <view class="backgroundColor-white padding1vh border_radius_10px">
          <image
            :src="poster.finalPath || ''"
            mode="widthFix"
            class="posterImage"
          ></image>
        </view>
        <view class="flex_row marginTop2vh">
          <!-- #ifdef H5 -->
          <view class="h5">长按海报保存图片或者使用浏览器分享</view>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <button class="button" size="mini" @tap.prevent.stop="saveImage()">
            保存图片
          </button>
          <button class="button" size="mini" @tap.prevent.stop="share()">
            分享店铺
          </button>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <button class="button" size="mini" @tap.prevent.stop="saveImage()">
            保存图片
          </button>
          <button
            class="button"
            open-type="share"
            size="mini"
            @tap.prevent.stop="uniShare()"
          >
            分享店铺
          </button>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <view class="hideCanvasView">
      <canvas
        class="hideCanvas"
        canvas-id="default_PosterCanvasId"
        :style="{
          width: (poster.width || 10) + 'px',
          height: (poster.height || 10) + 'px',
        }"
      ></canvas>
    </view>
    <uni-share ref="share"></uni-share>

    <!-- 商品海报 -->
    <uni-poster ref="poster"></uni-poster>
  </view>
</template>

<script>
import _app from "@/util/QS-SharePoster/app.js";
import uniShare from "@/components/uni-share/index.vue";
import uniPoster from "@/components/uni-poster/uni-poster.vue";
import { getSharePoster } from "@/util/QS-SharePoster/QS-SharePoster.js";
// #ifdef H5
const share = require("@/store/share.js");
// #endif
export default {
  components: { uniShare, uniPoster },
  data() {
    return {
      poster: {},
      qrShow: false,
      canvasId: "default_PosterCanvasId",
      ListInfo: [],
      shopInfo: "",
      curpage: 1,
      shareUrl: "",
      mid: "", //分销邀请码
    };
  },

  onLoad(e) {
    if (e.mid) {
      this.mid = e.mid;
      uni.setStorageSync("InvitationCode", e.mid);
    }
    if (e.api_member_id) {
      uni.setStorageSync("InvitationCode", e.api_member_id);
    }
  },
  onShow() {
    this.getInfo();
  },
  onReachBottom() {
    if (this.curpage) {
      this.getInfo(true);
    } else {
      uni.showToast({
        title: "到底了哦~~",
        icon: "none",
      });
    }
  },
  methods: {
    buyBtn(item) {
      console.log(item);
      let routes = getCurrentPages();
      let shareUrl =
        this.$share +
        "/#/mall/goods/info?goods_id=" +
        item.goods_id +
        "&pageFrom=share&api_member_id=" +
        uni.getStorageSync("api_member_id");
      let info = {
        good_name: item.goods_name,
        good_image: item.goods_image_url,
        good_price: item.goods_price,
        good_costprice: item.goods_promotion_price,
        good_url: shareUrl,
      };
      this.$refs.poster.shareFc(info);
    },
    ToshopInfo(goods_id) {
      uni.navigateTo({
        url: "/mall/goods/info?goods_id=" + goods_id,
      });
    },
    getInfo(state) {
      //获取页面信息
      this.$util
        .request({
          url: "/mobile/index.php?act=distribution&op=goodsList",
          method: "get",
          data: {
            curpage: this.curpage,
            mid: this.mid || "",
          },
        })
        .then((res) => {
          if (res.error_code == 0) {
            this.shopInfo = res.datas.shopInfo;
            if (this.shopInfo.shop_name) {
              uni.setNavigationBarTitle({
                title: this.shopInfo.shop_name,
              });
            }
            // #ifdef H5
            let shareInfo = {
              title: this.shopInfo.shop_name, // 分享标题
              desc: this.shopInfo.shop_desc, // 分享描述
              link:
                this.$share +
                "/#/member/distribution/MyStore?mid=" +
                this.shopInfo.member_id, // 分享链接
              imgUrl: this.shopInfo.shop_logo, // 分享图标
            };
            share.share(shareInfo);
            // #endif
            if (state) {
              this.ListInfo = this.ListInfo.concat(res.datas.goods_list);
            } else {
              this.ListInfo = res.datas.goods_list;
            }
            if (res.datas.page_info.hasmore) {
              this.curpage++;
            } else {
              this.curpage = res.datas.page_info.hasmore;
            }
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
    async shareFc() {
      let routes = getCurrentPages();
      this.shareUrl =
        this.$share +
        "/#/" +
        routes[routes.length - 1].route +
        "?mid=" +
        this.shopInfo.member_id;
      try {
        console.log("准备生成:" + new Date());
        const d = await getSharePoster({
          _this: this, //若在组件中使用 必传
          type: "testShareType",
          formData: {
            //访问接口获取背景图携带自定义数据
          },
          background: {
            width: 500,
            height: 760,
            backgroundColor: "#fff",
          },
          posterCanvasId: this.canvasId, //canvasId
          delayTimeScale: 20, //延时系数
          drawArray: ({ bgObj, type, bgScale }) => {
            const dx = bgObj.width * 0.045;
            const fontSize = bgObj.width * 0.06;
            const lineHeight = bgObj.height * 0.04;
            //可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
            return new Promise((rs, rj) => {
              rs([
                // 店铺logo
                {
                  type: "image",
                  url: this.shopInfo.shop_logo,
                  alpha: 1,
                  dx: 10,
                  dy: 10,
                  infoCallBack(imageInfo) {
                    return {
                      dWidth: 80,
                      dHeight: 80,
                    };
                  },
                },
                {
                  type: "text",
                  text: this.shopInfo.shop_name,
                  size: 18,
                  color: "black",
                  alpha: 1,
                  textAlign: "left",
                  textBaseline: "middle",
                  infoCallBack(textLength) {
                    _app.log(
                      "index页面的text的infocallback ，textlength:" + textLength
                    );
                    return {
                      dx: 100,
                      dy: 45,
                    };
                  },
                },
                {
                  type: "qrcode",
                  text: this.shareUrl,
                  // size: bgObj.width * 0.2,
                  size: 340,
                  dx: 15,
                  dy: 95,
                  // dx: bgObj.width * 0.05,
                  // dy: 460
                },
                // 店铺主图
                {
                  type: "image",
                  url: this.shopInfo.share_img,
                  alpha: 1,
                  dx: 0,
                  dy: 460,
                  infoCallBack(imageInfo) {
                    return {
                      dWidth: 90,
                      dHeight: 90,
                    };
                  },
                },
                {
                  type: "text",
                  text: "推荐码：" + this.shopInfo.member_id,
                  size: 19,
                  color: "#333333",
                  alpha: 1,
                  textAlign: "left",
                  textBaseline: "middle",
                  infoCallBack(textLength) {
                    return {
                      dx: 130,
                      dy: 470,
                    };
                  },
                  // lineFeed:{
                  // 	maxWidth: 210,
                  // 	lineHeight:22,
                  // 	lineNum: 3,
                  // 	dx: 100,
                  // 	dy:480
                  // 	}
                },
                {
                  type: "text",
                  text: this.shopInfo.shop_desc,
                  size: 16,
                  color: "#666666",
                  alpha: 1,
                  textAlign: "left",
                  textBaseline: "middle",
                  lineFeed: {
                    maxWidth: 210,
                    lineHeight: 22,
                    lineNum: 3,
                    dx: -1,
                  },
                  infoCallBack(textLength) {
                    _app.log(
                      "index页面的text的infocallback ，textlength:" + textLength
                    );
                    return {
                      dx: 130,
                      dy: 505,
                    };
                  },
                },
              ]);
            });
          },
          setCanvasWH: ({ bgObj, type, bgScale }) => {
            // 为动态设置画布宽高的方法，
            this.poster = bgObj;
          },
        });
        // console.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
        this.poster.finalPath = d.poster.tempFilePath;
        this.qrShow = true;
      } catch (e) {
        _app.hideLoading();
        _app.showToast(JSON.stringify(e));
        console.log(JSON.stringify(e));
      }
    },
    saveImage() {
      // #ifndef H5
      uni.saveImageToPhotosAlbum({
        filePath: this.poster.finalPath,
        success(res) {
          _app.showToast("保存成功");
        },
      });
      // #endif
      // #ifdef H5
      _app.showToast("保存了");
      // #endif
    },
    share() {
      // #ifdef APP-PLUS
      let shareInfo = {
        href: this.shareUrl,
        title: "皖集采",
        desc: this.shopInfo.shop_name,
        imgUrl: this.shopInfo.share_img,
      };
      this.$refs.share.shareInfo(shareInfo);
      // _app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
      // #endif
      // #ifndef APP-PLUS
      _app.showToast("分享了");
      // #endif
    },
    hideQr() {
      this.qrShow = false;
    },
  },
};
</script>

<style>
.ListBox {
  background-color: #ffffff;
}
.ListBox .list {
  border-bottom: 1rpx solid #eeeeee;
}
.ListBox .list .shopName {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 100rpx;
  color: #333333;
  font-weight: 550;
}
.ListBox .list .Price {
  color: #fe5455;
  font-weight: bold;
  line-height: 30rpx;
}
.ListBox .list .buyBtn {
  padding: 0 10rpx;
  line-height: 45rpx;
  border-radius: 10rpx;
  background-color: #fe5455;
  color: #fff9fc;
  margin-right: 20rpx;
}
.ListBox .shopImg image {
  width: 180rpx;
  height: 180rpx;
  margin: 20rpx;
  border-radius: 20rpx;
}
.recommend {
  margin: 30rpx 0;
  color: #fe5455;
  font-weight: bold;
}
.recommend .hrBox {
  width: 250rpx;
  height: 3rpx;
  background-color: #cccccc;
}
.loveIco {
  width: 150rpx;
}
.content {
  margin: 0 20rpx;
}
.Banner {
  height: 300rpx;
  overflow: hidden;
  position: relative;
}
.Banner .storeName {
  position: absolute;
  top: 220rpx;
  left: 200rpx;
  color: #fff9fc;
  font-weight: bold;
}
.Info {
  background-color: #ffffff;
}
.Info > view {
  border-right: 1rpx solid #eeeeee;
  width: 33%;
  height: 100rpx;
  margin: 20rpx 0;
  text-align: center;
  color: #333333;
}
.code image {
  width: 30rpx;
  height: 30rpx;
}
.flexBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Long {
  position: relative;
}
.Long image {
  position: absolute;
  top: -95rpx;
  left: 20rpx;
  z-index: 100;
  border: 2rpx solid #eeeeee;
  width: 150rpx;
  height: 150rpx;
}

.h5 {
  position: relative;
  bottom: 38px;
  font-size: 12px;
  left: 46px;
  color: #999999;
}
.button {
  background-color: #d0036a !important;
  color: #ffffff;
}
.hideCanvasView {
  position: relative;
}

.hideCanvas {
  position: fixed;
  top: -99999upx;
  left: -99999upx;
  z-index: -99999;
}

.flex_row_c_c {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modalView {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  outline: 0;
  transform: scale(1.2);
  perspective: 2500upx;
  background: rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 999;
}

.modalView.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.backgroundColor-white {
  background-color: white;
}

.border_radius_10px {
  border-radius: 10px;
}

.padding1vh {
  padding: 1vh;
}

.posterImage {
  width: 75vw;
}

.flex_row {
  display: flex;
  flex-direction: row;
}

.marginTop2vh {
  margin-top: 2vh;
}
.InfoBox {
  width: 500rpx;
}
</style>
